"use client"
import React, { useEffect, useState } from 'react';
import { DeploymentUnitOutlined } from '@ant-design/icons';
import { Breadcrumb, Layout, Dropdown } from 'antd';
import { useParams, useRouter } from 'next/navigation';
import { usePathname } from 'next/navigation';
import type { MenuProps } from 'antd';
import Menus from '@/component/menu';
import { Bread } from '@/component/data';
import "../component/css/layout.css"

const { Header, Content, Sider } = Layout;

const menu: MenuProps['items'] = [
  {
    label: '修改资料',
    key: '修改资料',
  },
  {
    label: '修改头像',
    key: '修改头像',
  },
  {
    label: '修改密码',
    key: '修改密码',
  },
  {
    label: '退出系统',
    key: '退出系统',
    danger: true,
  },
]

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  // 路由
  const [token, setToken] = useState<any>();
  const params = usePathname();
  const router = useRouter();
  const handleMenuClick: MenuProps['onClick'] = (e) => {
    console.log('click', e);
    if(e.key === '退出系统'){
      router.push('/login');
      setTimeout(() => {
        localStorage.removeItem('token');
        setToken('');
      }, 0);
    }
  };
  useEffect(() => {
    const storedToken = localStorage.getItem('token');
    // console.log(params.split('/'));
    setToken(storedToken);
    if (!storedToken) {
      // 使用 setTimeout 确保在状态更新后再进行路由跳转
      setTimeout(() => {
        router.push('/login');
      }, 0);
    }else{
      if (params === '/' || params === '') {
        // 如果路径为空，重定向到 /home 页
        setTimeout(() => {
          router.push('/home');
        }, 0);
      }
    }
  }, [params]);

  return (
    <html lang="en">
      <body style={{ height: "100vh", margin: 0 }}>
        {
          token ?
            <Layout>
              <Header style={{ display: 'flex', alignItems: 'center', padding: "0 20px" }}>
                  <div className='layoutTop'>
                    <div className='logo'>
                      <DeploymentUnitOutlined />
                      <span>客户关系管理系统</span>
                    </div>
                    <div className='userBox'>
                      <span className='user'>事项</span>
                      <span className='user'>日程</span>
                      <span className='user'>消息</span>
                      <span className='user'>锁屏</span>
                      <span className='user'>
                        <Dropdown menu={{
                          items: menu,
                          onClick: handleMenuClick,
                        }}>
                          <span>{token}</span>
                        </Dropdown>
                      </span>
                    </div>
                  </div>
              </Header>
              <Layout>
                <Sider width={240} style={{ height: "calc(100vh - 64px)", background: "white" }}>
                  {/* 左侧 */}
                  <Menus url={params.split('/')} />
                </Sider>
                <Layout style={{ padding: '0 24px 24px' }}>
                  <Breadcrumb
                    items={Bread(params).map((item:any) => ({ title: item }))}
                    style={{ margin: '16px 0' }}
                  />
                  <Content
                    style={{
                      padding: 24,
                      margin: 0,
                      minHeight: 280,
                      background: "#fff",
                      borderRadius: "#fff",
                    }}
                  >
                    {children}
                  </Content>
                </Layout>
              </Layout>
            </Layout> : children
        }
      </body>
    </html>
  );
}